<template>
	<!-- 在线客服 -->
	<view class="diy-service" :style="[{'right':right},{'bottom': bottom}]">
		<!-- 拨打电话 -->
		<block v-if="params.type == 'phone'">
			<form @submit="_onServiceEvent" report-submit="true">
				<button form-type="submit" class="btn-normal">
					<view class="service-icon">
						<image class="image" :src="params.image"></image>
					</view>
				</button>
			</form>
		</block>
		<!-- 在线聊天 -->
		<block v-else-if="params.type == 'chat'">
			<button open-type="contact" class="btn-normal">
				<view class="service-icon">
					<image class="image" :src="params.image"></image>
				</view>
			</button>
		</block>
	</view>
</template>

<script>
	export default {
		computed: {
			right() {
				return uni.upx2px(this.itemStyle.right * 2) + '%';
			},
			bottom() {
				return uni.upx2px(this.itemStyle.bottom * 2) + '%';
			}
		},
		props: {
			itemStyle: {},
			params: {}
		},
		methods: {
			/**
			 * 点击拨打电话
			 */
			_onServiceEvent(e) {
				// 记录formid
				this.saveFormId(e.detail.formId);
				// 拨打电话
				uni.makePhoneCall({
					phoneNumber: this.data.params.phone_num
				})
			},
		}
	}
</script>

<style>
	/* common.wxss */
	@import url("../../utils/common.scss");

	/* 在线客服 */

	.diy-service {
		position: fixed;
		z-index: 999;
	}

	.diy-service .service-icon {
		padding: 10upx;
	}

	.diy-service .service-icon image {
		display: block;
		width: 90upx;
		height: 90upx;
	}
</style>
